import { Device, GatewayType } from "@/api/interface/iot";
import { getGatewayList } from "@/api/modules/iot/gateway";
import DialogBox from "@/components/DialogBox";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import { RouterPath } from "@/enums/routerPath";
import { DeviceStatusEnum } from "@/enums/statusEnum";
import { dataFormat } from "@/utils/format";
import { resolvePage } from "@/utils/routerUtil";
import { ElMessage } from "element-plus";
import "./machine-select.scss";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	props: {
		visible: {
			type: Boolean,
			default() {
				return false;
			}
		},
		selectDefault: {
			type: Array,
			default: () => []
		}
	},
	emits: ["update:visible", "submit"],
	setup(props, { emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const initParam = reactive<Device.ReqGateway>({ productModel: "SS30S" });
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getGatewayList(params, GatewayType.Gateway);
		};
		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "onlineStatus", label: proxy?.$t("machineselect.tablist_label.status"), width: 75, search: { slot: {} } },
			{
				prop: "productModel",
				label: proxy?.$t("machineselect.tablist_label.type"),
				width: 75,
				search: { slot: {} },
				isShow: false
			},
			{ prop: "name", label: proxy?.$t("machineselect.tablist_label.name"), width: 180, search: { el: "input" } },
			{ prop: "sn", label: proxy?.$t("machineselect.tablist_label.sn"), width: 180, search: { el: "input" } },
			{ prop: "deptName", label: proxy?.$t("machineselect.tablist_label.dept_name"), width: "100", search: { slot: {} } },
			{ prop: "lastLiveTime", label: proxy?.$t("machineselect.tablist_label.lastlivetime"), width: 170 },
			{ prop: "logoutTime", label: proxy?.$t("machineselect.tablist_label.logout"), width: 170 },
			{ prop: "location", label: proxy?.$t("machineselect.tablist_label.location") }
			// { prop: "operation", label: "操作", fixed: "right", width: 130 }
		];
		const proTable = ref<any>();
		const drawerVisible = ref(props.visible);
		watch(
			() => props.visible,
			() => {
				drawerVisible.value = props.visible;
			}
		);
		// drawer框状态
		const validData = () => {
			console.log(proTable.value.selectedList);
			if (proTable.value.selectedList.length > 1) {
				return ElMessage.error(proxy?.$t("machineselect.elmsg.onlyone"));
			}
			emit("submit", proTable.value.selectedList);
			close();
		};
		const close = () => {
			emit("update:visible", false);
		};
		return () => {
			return (
				<DialogBox
					class="machine-select"
					v-model:visible={drawerVisible.value}
					title={proxy?.$t("machineselect.dialog_title.select")}
					width="1000px"
					onClose={close}
					onConfirm={validData}
				>
					<ProTable
						ref={proTable}
						title={proxy?.$t("machineselect.tab_title.list")}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						searchCol={5}
						dataCallback={dataCallback}
						selectDefault={props.selectDefault}
						selectId="sn"
					>
						{{
							"search-onlineStatus": () => {
								return (
									<el-select v-model={initParam.onlineStatus} style="width:100px">
										<el-option label={proxy?.$t("machineselect.option.all")} value=""></el-option>
										<el-option label={proxy?.$t("machineselect.option.online")} value={DeviceStatusEnum.ONLINE}></el-option>
										<el-option label={proxy?.$t("machineselect.option.offline")} value={DeviceStatusEnum.OFFLINE}></el-option>
									</el-select>
								);
							},
							"search-productModel": () => {
								return (
									<el-select v-model={initParam.productModel} style="width:100px">
										<el-option label={proxy?.$t("machineselect.option.all")} value=""></el-option>
										<el-option label="SS30S" value="SS30S"></el-option>
										<el-option label="SS30A" value="SS30A"></el-option>
									</el-select>
								);
							},
							"search-deptName": () => {
								return <SelectDeptList detail={initParam} appendChild onChange={val => (initParam.deptId = val.id)} />;
							},
							sn: (scope: any) => {
								return (
									<div
										title={proxy?.$t("machineselect.title.sn")}
										class="truncate cursor-pointer primary-color"
										onClick={() => resolvePage(RouterPath.gatewayDetail, { sn: scope.row.sn, type: GatewayType.Gateway })}
									>
										{scope.row.sn}
									</div>
								);
							},
							productModel: (scope: any) => {
								return scope.row.productModel ? (
									<div
										title={proxy?.$t("machineselect.title.product")}
										class="truncate cursor-pointer primary-color"
										onClick={() => resolvePage(RouterPath.productDetail, { productModel: scope.row.productModel })}
									>
										{scope.row.productModel}
									</div>
								) : (
									"--"
								);
							},
							location: (scope: any) => {
								return scope.row.location?.address || "--";
							},
							lastLiveTime: (scope: any) => {
								return dataFormat("datetime", scope.row.lastLiveTime);
							},
							logoutTime: (scope: any) => {
								return dataFormat("datetime", scope.row.logoutTime);
							},
							onlineStatus: (scope: any) => {
								return <OnlineStatus v-model={scope.row.onlineStatus} />;
							}
						}}
					</ProTable>
				</DialogBox>
			);
		};
	}
});
